﻿@{
    ViewBag.Title = "Vue使用用例";
}

<div id="demo">

    <h4>共：<span class="badge badge-secondary">{{countNum}}</span> 条     合计列1：<span class="badge badge-secondary">{{sumNum}}</span></h4>
    <table class="table table-striped  table-hover">
        <thead>
            <tr>
                <th scope="col">选择框</th>
                <th scope="col">列名1</th>
                <th scope="col">列名2</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="x in studentList">
                <td>                   
                    <input type="checkbox" :id="x.TextStrTwo" v-model="x.Cb">
                    <label :for="x.TextStrTwo">{{ NewStudent.Cb }}</label>
                </td>
                <td>
                    <input type="number" class="form-control" v-model="x.TextStr" />
                </td>
                <td>
                    <input type="text" class="form-control" v-model="x.TextStrTwo" />
                </td>
            </tr>
        </tbody>
    </table>
    <br />

    <table>
        <tr class="textCenter">
            <td>
                <input type="checkbox" id="checkbox" v-model="NewStudent.Cb">
                <label for="checkbox">{{ NewStudent.Cb }}</label>
            </td>
            <td style="width: 60px;"><input type="number" class="form-control" id="NewTextStrOne" v-model="NewStudent.TextStr" v-on:keyup.enter="NextInput" /></td>
            <td style="width: 60px;"><input type="text" class="form-control" id="NewTextStrTwo" v-model="NewStudent.TextStrTwo" v-on:keyup.enter="AddNew" /></td>
        </tr>
    </table>

    <br />
</div>



<script type="text/javascript">
    var vm = new Vue({
        el: "#demo",
        data: {
            studentList: [],
            NewStudent: { Cb: true, TextStr: '1', TextStrTwo: 'v' },
            sumNum: 0.00,
            countNum: 0,
            BText: '23'
        },
        methods: {
            shows1: function (d) {
                console.log(d);
            },
            NextInput: function () {
                $('#NewTextStrTwo').focus();
            },
            AddNew: function () {
                this.studentList.push(Object.assign({}, this.NewStudent));
                this.NewStudent = { TextStr: '', TextStrTwo: '' };
                $('#NewTextStrOne').focus();
            },
          
            dd: function () {
                vm.GetAllStudent();
            }
        },
        watch: {
            studentList: {
                handler: function (studentList) {
                    this.countNum = studentList.length;

                    this.sumNum = 0.00;
                    for (var i = 0; i < studentList.length; i++) {
                        if (studentList[i].Cb == true) {
                            this.sumNum += parseFloat(studentList[i].TextStr);
                        }
                    }

                }, deep: true
            }
        }
    });
        //vm.GetAllStudent();
</script>